<template>
<!-- 登录页面 -->
  <div class="login">
    <div class="login_box">
        <!-- 头像区域 -->
        <div class="login_img">
            <img src="../assets/logo.png" alt="">
        </div>
        <!-- 账户区域 -->
        <el-form :model="userform" :rules="rules" ref="ruleFormref" label-width="80px" class="login_from">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="userform.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="userform.password"></el-input>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item class="login_button">
                <el-button type="primary" @click='login'>登录</el-button>
                <el-button type="info" @click='clear'>重置</el-button>
            </el-form-item> 
            <el-row class="reguire">
               <span>没有账号？</span> <el-link @click="register" type="primary">去注册</el-link>
            </el-row>           
        </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data(){
      return{
          userform:{
              username:'',
              password:''
          },
        //   验证规则.
        rules:{
            username:[
                {required:true,message:'请输入用户名',trigger:'blur'},
                {min:2,max:16,message:'长度在2-16个字符',trigger:'blur'}
            ],
            password:[
                {required:true,message:'请输入密码',trigger:'blur'},
                {min:6,max:16,message:'长度在6-16个字符',trigger:'blur'}
            ]
        }
      }
  },
  methods:{
    //   登录按钮
    login(){
        this.$refs.ruleFormref.validate(valid=>{
            if(!valid) return
            this.$axios.post('/users/getuser',{username:this.userform.username}).then(res=>{
                if(!res.data.list) return this.$message.error('用户名不存在')
                this.$axios.post("/users/login", {
                username:this.userform.username,
                password:this.userform.password
                }).then((res) => {
                    if(!res.data.list.length){
                        this.$message.error('密码不正确');
                    }else{
                        this.$message.success('登录成功');
                        localStorage.setItem('user',JSON.stringify(res.data.list[0]))
                        this.$router.push('/')
                    }
                })
            })

        })

    },
    // 重置表单
    clear(){
        this.$refs.ruleFormref.resetFields()
    },
    // 未注册，去注册
    register(){
        this.$router.push('/register')
    }
  }
}
</script>

<style lang="less" scoped>
.login{
    width: 100%;
    height: 100%;
    background: #2b4d6e;
}
.login_box{
    width: 500px;
    height: 350px;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    .login_img{
        width: 130px;
        height: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        overflow: hidden;
        padding: 10px;
        box-sizing: border-box;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%,-25%);
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #ccc;
        }
    }
}
.login_from{
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 40px;
    padding: 0 20px;
    box-sizing: border-box;
    .login_button{
        text-align: right;
    }
    .reguire{
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
            font-size: 14px;
        }
    }
}
</style>
